import React from 'react'
import {List,InputItem,NavBar,Icon,Grid,TextareaItem} from 'antd-mobile'
import io from 'socket.io-client'
import {connect} from 'react-redux'
import {getMsgList,sendMsg,recvMsg,changeRecvMsgFlag,readMsg} from '../../redux/chat_redux'
import {getChatId} from '../../util'
import QueueAnim from 'rc-queue-anim';
const socket=io('ws://localhost:9093')
@connect(
    state=>state,
    {getMsgList,sendMsg,recvMsg,changeRecvMsgFlag,readMsg}
)
class Chat extends React.Component{
    constructor(props){
        super(props);
        this.state={
            text:'',
            msg:[],
            showEmjoy:false
        }
    }
    handleSubmit(){
        if(!this.state.text.trim()){
            return false
        }   
        const from=this.props.user._id;
        const to=this.props.match.params.user;
        const msg=this.state.text;
        const avatar=this.props.user.avatar
        this.props.sendMsg({from,to,msg,avatar})
        this.setState({text:'',showEmjoy:false})
        
        //发送消息成功 滚动条滚动到底部 注意这里要 异步修改 react修改props是异步更新的 这里scrollIntoView或者scrollTop都可以  这个setTimeout延迟测试chrome 0就可以
        // firfox需要100  所以在componentDidUpdate 这个生命周期里面执行
        //    setTimeout(()=>{
        //     var chatPage=this.refs.chatPage;
        //     chatPage.scrollIntoView(false)
        //     var wrapper=document.getElementsByClassName('wrapper')[0]
        //     // wrapper.scrollTop=wrapper.scrollHeight;
        //     console.log(wrapper.scrollTop)
        //     // chatPage.scrollTop=chatPage.scrollHeight;
        //    },100)
            
            
        // socket.emit('sendMsg',{text:this.state.text})
        // this.setState({text:''})
    }
    fixCarousel(){
        setTimeout(()=>{
            window.dispatchEvent(new Event('resize'))
        },0)
    }
    //滚动到底部的方法
    scrollToBottom(){
        var chatPage=this.refs.chatPage;
        chatPage.scrollIntoView(false)
    }
    //组件即将卸载前执行
    componentWillUnmount(){
       if(!this.props.chat.chatmsg.length){
        this.props.changeRecvMsgFlag(false)
        
       }
       const userTo=this.props.match.params.user
        this.props.readMsg(userTo)
        
    }
    componentWillMount(){
        console.log('componentwillMount')
        
    }
    componentWillReceiveProps(nextProps){
        console.log('componentWillReceiveProps')
        console.log(nextProps)
    }
    componentWillUpdate(nextProps){
        console.log('componentWillUpdate')
        console.log(nextProps)
    }
    //组件更新结束之后执行，在初始化render时不执行
    componentDidUpdate(prevProps,prevState){  
    //     console.log('componentDidUpdate')
    //     console.log(prevProps,prevState)
        setTimeout(() => {
            this.scrollToBottom()
        }, 0);
    //     //这里判断info接口加载完了在执行下面的代码 loadDataEnd两次为true 但是下面的chat.chatmsg.length已经有数据了 所以renderMSGlist里的请求还是只有一次
        
    //     if(this.props.user.loadDataEnd){
    //         this.renderMSGlist()
    //     }
        
    }
    renderMSGlist(){
        const userTo=this.props.match.params.user
        //这里也不能每次都请求接口 接收消息 只是第一次进来空的绑定就好了 再当前页刷新时请求
        console.log(this.props)
        if(!this.props.chat.users){
            console.log('====================================');
            console.log(21313);
            console.log('====================================');
            this.props.getMsgList({userTo});
        }
        //
        if(!this.props.chat.chatmsg.length){
            setTimeout(()=>{
                const RecvMsgFlag=this.props.chat.recvMsgFlag
                const loadDataEnd=this.props.user.loadDataEnd;
                //这里又多加了个判断 如果第一次进入不输入返回 chatmsg仍然为空 会触发多次
                if(RecvMsgFlag&&loadDataEnd){
                    // console.log(123123)
                    this.props.getMsgList({userTo});
                    this.props.recvMsg()
                    // this.props.changeRecvMsgFlag(false)
                }
            },0)
            
        }
     }
    componentDidMount(){
        const userTo=this.props.match.params.user
        if (!this.props.chat.chatmsg.length) {
			this.props.getMsgList({userTo})
			this.props.recvMsg()	
        }
        
        
        this.fixCarousel()
        this.scrollToBottom()
        
        
        // // console.log(this.props.chat.chatmsg)
        // //这里也不能每次都请求接口 接收消息 只是第一次进来空的绑定就好了 再当前页刷新时请求
        if(!this.props.chat.users){
            
            this.props.getMsgList({userTo});
        }
        // if(!this.props.chat.chatmsg.length){
           
        //     setTimeout(()=>{
        //         const RecvMsgFlag=this.props.chat.recvMsgFlag
        //         const loadDataEnd=this.props.user.loadDataEnd;
        //         //这里又多加了个判断 如果第一次进入不输入返回 chatmsg仍然为空 会触发多次
        //         if(RecvMsgFlag&&loadDataEnd){
        //             console.log(123123)
        //             this.props.getMsgList({userTo});
        //             this.props.recvMsg()
        //         }
        //     },0)
            
        // }

        
    }
    render(){
        console.log('render')
        console.log(this.props)
        const emoji = '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐 😷 🤒 🤕 😈 👿 👹 👺 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🙌 👏 🙏 👍 👎 👊 ✊ 🤘 👌 👈 👉 👆 👇 ✋  🖐 🖖 👋  💪 🖕 ✍️  💅 🖖 💄 💋 👄 👅 👂 👃 👁 👀 '
                        .split(' ')
                        .filter(v=>v)
                        .map(v=>({text:v}))
        
        const userid=this.props.match.params.user;
        const Item=List.Item
        const users=this.props.chat.users;
        // if(!users[userid]){
        //     return null
        // }
        const chatid=getChatId(userid,this.props.user._id)

        // console.log(chatid);
        //过滤聊天内容 只是跟当前用户的聊天信息 chatid一致
        
        const chatmsg=this.props.chat.chatmsg.filter(v=>v.chatid==chatid)
       
        return(
            <div id='chat-page' ref='chatPage'>
                <NavBar 
                    className='chat-header'
                    mode='dark'
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.props.history.goBack()}
                >
                    {/* {users[userid].name} */}
                    {users.from_name}
                </NavBar>
                <QueueAnim delay={100} className="queue-simple" type='scaleBig'>
                {chatmsg.map((v,index)=>{
                    const avatar=require(`../img/${v.avatar}.png`)
                    //区分from to 左边 右边
                    return v.from==userid?(
                        <List key={v._id}>
                            <Item
                             multipleLine wrap
                            thumb={avatar}
                            >{v.content}</Item>    
                        </List>    
                    ):(
                        <List key={v._id}>
                        <Item
                            multipleLine 
                            wrap
                            extra={<img src={avatar}/>}
                            className='chat-me'
                        >{v.content}</Item>    
                        </List>
                    )
                })}
                </QueueAnim>
                <div className="stick-footer">
                    <List>
                        <TextareaItem
                        clear
                        autoHeight
                        labelNumber={5}
                        // rows={3}
                        placeholder='请输入'
                        value={this.state.text}
                        onKeyUp={(v)=>{v.keyCode==13?this.handleSubmit():null}}
                       
                        onChange={v=>{
                            this.setState({text:v})
                        }}
                        title={
                        <div style={{lineHeight:'normal'}}>
                            <span 
                                style={{marginRight:15}}
                                onClick={()=>{
                                    
                                    this.setState({
                                        showEmjoy:!this.state.showEmjoy
                                    },this.fixCarousel)
                                    
                                }}
                            >😃</span>
                            <span onClick={()=>this.handleSubmit()}>发送</span>
                        </div>
                        }
                        >
                        </TextareaItem>
                    </List>
                    {/* 这样写开支太大了 只是显示隐藏就好 */}
                    {/* // style={{display:(this.state.showEmjoy)?'block':'none'}} */}
                    <div id="msg_end" style={{height:0,overflow:'hidden'}} ref='msg_end'></div>
                    {this.state.showEmjoy?
                    
                    <Grid 
                        data={emoji}
                        columnNum={9}
                        isCarousel={true}
                        carouselMaxRow={4}
                        onClick={(el)=>{
                            this.setState({
                                text:this.state.text+el.text,
                            })
                            console.log('=====')
                        }}
                    />
                     :null }
                    {/* } */}
                    
                </div>
            </div>
            
        )
        
    }
}
export default Chat;